<template>
  <div class="userBg">
    <p class="us_name">{{ userObj.user.firstname }}</p>
    <p class="us_id">志愿者ID:123456</p>
    <p class="us_jf">积分:{{ userObj.score }}</p>
    <p>
      <img src="../assets/map.png" alt="" class="us_img" />
    </p>

    <ul class="user_pointer">
      <li>
        <span>真实姓名</span><span>{{ userObj.user.firstname }}</span>
      </li>
      <li><span>性别</span><span></span></li>
      <li>
        <span>联系电话</span><span>{{ userObj.user.mobile }}</span>
      </li>
      <li>
        <span>注册时间</span><span>{{ userObj.user.createdAt }}</span>
      </li>
      <li>
        <span>服务时长</span><span>{{ userObj.duration }}</span>
      </li>
      <li><span @click="timeClick">志愿服务计时申请</span><span></span></li>
      <li><span>积分兑换服务</span><span>>>></span></li>
    </ul>

    <van-dialog
      v-model="show"
      title="申请"
      show-cancel-button
      @confirm="yes"
      @cancel="close"
    >
      <van-field
        readonly
        clickable
        label="选择活动"
        :value="sq.activityType"
        placeholder="请选择活动"
        @click="showPicker = true"
      />

      <van-field
        readonly
        clickable
        label="值班开始日期"
        :value="sq.startTime"
        placeholder="请选择值班开始日期"
        @click="showDatetime = true"
      />

      <van-field
        readonly
        clickable
        label="值班结束日期"
        :value="sq.endTime"
        placeholder="请选择值班结束日期"
        @click="showDatetimeLast = true"
      />

      <van-field
        v-model="sq.remark"
        rows="1"
        autosize
        label="留言"
        type="textarea"
        placeholder="请输入留言"
      />
    </van-dialog>

    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>

    <van-popup v-model="showDatetime" round position="bottom">
      <van-datetime-picker
        type="datetime"
        title="请选择年月日"
        @confirm="onConfirmTime"
        @cancel="showDatetime = false"
      />
    </van-popup>

    <van-popup v-model="showDatetimeLast" round position="bottom">
      <van-datetime-picker
        type="datetime"
        title="请选择年月日"
        @confirm="onConfirmTimeLast"
        @cancel="showDatetimeLast = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { userSq } from "@/api/user"

export default {
  name: "user",
  data() {
    return {
      show: false,
      sq: {
        activityType: "",
        startTime: "",
        remark: "",
        endTime: "",
      },
      columns: [
        "《扶危济困》",
        "《阳光助残》",
        "《工作室值班》",
        "《爱心课堂》",
        "《闲置衣物捐助》",
        "《文明创城》",
        "《社区服务》",
        "《便民服务》",
        "《大型活动》",
        "《疫情防控》",
        "《司法援助》",
        "《心理疏导》",
      ],
      showPicker: false,
      showDatetime: false,
      userObj: {},
      showDatetimeLast: false,
    }
  },
  methods: {
    timeClick() {
      this.show = true
    },
    yes() {
      userSq(this.sq).then(() => {
        this.$dialog.alert({
          title: "提示",
          message: "申请成功",
        })
      })
    },
    close() {
      this.sq.activityType =
        this.sq.endTime =
        this.sq.startTime =
        this.sq.remark =
          ""
    },
    onConfirm(value) {
      this.sq.activityType = value
      this.showPicker = false
    },
    onConfirmTime(value) {
      this.sq.startTime = this.timeValue(value)
      this.showDatetime = false
    },
    onConfirmTimeLast(value) {
      this.sq.endTime = this.timeValue(value)
      this.showDatetimeLast = false
    },
    timeValue(value) {
      let year = value.getFullYear()
      let month = value.getMonth() + 1
      let day = value.getDate()
      let hour = value.getHours()
      let min = value.getMinutes()
      let time = year + "-" + month + "-" + day + " " + hour + ":" + min + ":00"
      return time
    },
  },
  created() {
    this.userObj = JSON.parse(localStorage.getItem("userinfo"))
    let datetime = this.userObj.user.createdAt
    let date = new Date(datetime)
    this.userObj.user.createdAt =
      date.getFullYear() +
      "-" +
      eval(date.getMonth() + 1) +
      "-" +
      date.getDate() +
      " " +
      date.getHours() +
      ":" +
      date.getMinutes() +
      ":" +
      date.getSeconds()
  },
}
</script>

<style scoped lang="scss">
.userBg {
  width: 100%;
  height: 38rem;
  background: url("../assets/img1.png") no-repeat;
  background-size: 100% 100%;

  p {
    color: white;

    .us_img {
      width: 5rem;
      height: 5rem;
      border-radius: 50%;
      margin-top: 1rem;
    }
  }

  .us_name {
    font-size: 1.3rem;
    font-weight: 700;
    padding-top: 4rem;
  }

  .us_id {
    text-align: right;
    padding-right: 1rem;
    font-weight: 600;
    font-size: 1rem;
  }

  .us_jf {
    font-size: 1rem;
  }

  .user_pointer {
    width: 90%;
    margin: 0 auto;

    li {
      display: flex;
      justify-content: space-between;
      margin: 1.5rem 0;

      span {
        font-size: 1rem;
        font-weight: bold;
      }
    }
  }
}
</style>